<template>
	<view class="container">
		<view class="date-wrapper flex-x-center">
			<image src="../../static/images/icon-open.png" mode="" class="icon-open reverse" @tap="prevWeek"></image>
			<text>{{weekStartDate}}</text>
			<text style="padding: 0 15rpx;">~</text>
			<text>{{weekEndDate}}</text>
			<image src="../../static/images/icon-open.png" mode="" class="icon-open" @tap="nextWeek"></image>
		</view>
		<view class="rule-wrapper flex-x-bet-y-center">
			<text style="font-size: 28rpx;color: #666;">Color rule</text>
			<view class="tips flex-y-center">
				<zb-tooltip content="The time slot has been set but no reservation has been made." color="#FFFAF7" placement="bottom" ref="tooltip1">
					<view class="zb-tooltip" @tap="openTooltip('tooltip1')">
						<view class="tip-box box-white"></view>
						<text>white</text>
					</view>
				</zb-tooltip>
				<zb-tooltip content="This time slot is not available by appointment." color="#FFFAF7" placement="bottom"  ref="tooltip2">
					<view  class="zb-tooltip" @tap="openTooltip('tooltip2')">
						<view class="tip-box box-gray"></view>
						<text>gray</text>
					</view>
				</zb-tooltip>
				<zb-tooltip content="The class is booked and has not been cancelled." color="#FFFAF7" placement="bottom"  ref="tooltip3">
					<view class="zb-tooltip"  @tap="openTooltip('tooltip3')">
						<view class="tip-box box-green"></view>
						<text>green</text>
					</view>
				</zb-tooltip>
				<zb-tooltip content="Classes have been finished." color="#FFFAF7" placement="bottom-end"  ref="tooltip4">
					<view class="zb-tooltip"  @tap="openTooltip('tooltip4')">
						<view class="tip-box box-blue"></view>
						<text>blue</text>
					</view>	
				</zb-tooltip>
			</view>
		</view>
		
		<view class="curriculum-wrapper">
			<view class="header">
				<view class="time">Time</view>
				<view class="date">Mo</view>
				<view class="date">Tu</view>
				<view class="date">We</view>
				<view class="date">Th</view>
				<view class="date">Fr</view>
				<view class="date">Sa</view>
				<view class="date">Su</view>
			</view>
			<view class="tr" v-for="(item, index) in timeList" :key="item.timeId">
				<view class="times">
					<view class="">{{item.time.startTime}}</view> 
					<view class="">~</view>
					<view class="">{{item.time.endTime}}</view>
				</view>
				<view :class="'color ' + column.columnColor"  v-for="(column ,index) in item.columns" @tap="studentDetail(column)"></view>
			</view>
		</view>
		
		<my-modal ref="modal">
			<view class="student-wrapper">
				<view class="info-row">
					<view class="label">name:</view>
					<view class="content">{{tipForm.student.sysUser.nickName}}</view>
				</view>
				<view class="info-row">
					<view class="label">age:</view>
					<view class="content">{{tipForm.student.age}}</view>
				</view>
				<view class="info-row">
					<view class="label">MP:</view>
					<view class="content">{{tipForm.student.sysUser.phonenumber}}</view>
				</view>
				<view class="info-row">
					<view class="label">Course type:</view>
					<view class="content">{{tipForm.courseTag.courseTagName || ''}}</view>
				</view>
				<view class="info-row">
					<view class="label">Metting number:</view>
					<view class="content">{{tipForm.teacher.meetingCode || 'None'}}</view>
				</view>
			</view>
		</my-modal>

	</view>
</template>

<script>
	/**
	 * 灰色代表：未设置时段
		 白色代表：已设置时段但无人预约
		 绿色代表：已被预约，未消课
		 蓝色代表：预约已消课
	 */
	import { selectCourseTimeStatusByDate, selectTipsInfo } from '@/api/common.js'
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				menuButtonInfo: null,
				weekStartDate: '',
				weekEndDate: '',
				timeList: [],
				tipForm: {
					courseTag: {},
					courseTime: [],
					order: {},
					student: {
						sysUser:{}
					},
					teacher:{
						sysUser:{}
					}
				},
				timer: ''
			}
		},
		computed:{
			...mapGetters(['userId'])
		},
		onLoad() {
			this.menuButtonInfo = this.menuButton;
		},
		mounted() {
			this.getCurrentWeek()
		},
		methods: {
			selectCourseTimeStatusByDate(startDate, endDate){
				selectCourseTimeStatusByDate({startDate, endDate}).then(res => {
					this.timeList = res.data || []
					this.timeList.forEach(item => {
						item.time.startTime = item.time.startTime.substr(0, item.time.startTime.length - 3)
						item.time.endTime = item.time.endTime.substr(0, item.time.endTime.length - 3)
					})
				})
			},
			// 获得当前日期的周一 周日
			getCurrentWeek(){
				const date = new Date()
				let day = date.getDay() || 7; 
				const startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1 - day)
				this.weekStartDate = this.formatDate(startDate)
				const endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 7 - day)
				this.weekEndDate = this.formatDate(endDate)
				this.selectCourseTimeStatusByDate(this.weekStartDate, this.weekEndDate)
			},
			// 上一周
			prevWeek(){
				if(this.timer) return
				this.timer = setTimeout(() => {
					const date = new Date(this.weekStartDate)
					const startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 7)
					const endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1)
					this.weekStartDate = this.formatDate(startDate);
					this.weekEndDate = this.formatDate(endDate)
					this.selectCourseTimeStatusByDate(this.weekStartDate, this.weekEndDate)
					clearTimeout(this.timer)
					this.timer = ''
				}, 500)
				
			},
			// 下一周
			nextWeek(){
				if(this.timer) return
				this.timer = setTimeout(() => {
					const date = new Date(this.weekEndDate)
					const startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1)
					const endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 7)
					this.weekStartDate = this.formatDate(startDate);
					this.weekEndDate = this.formatDate(endDate)
					this.selectCourseTimeStatusByDate(this.weekStartDate, this.weekEndDate)
					clearTimeout(this.timer)
					this.timer = ''
				}, 500)
			},
			formatDate(date){
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day :day;
				return year + '-' + month + '-' + day
			},
			openTooltip(){
				for(var i = 1; i <= 4; i++){
					this.$refs[`tooltip${i}`].close()
				}
			},
			studentDetail(item){
				if(item.columnColor == 'gray' || item.columnColor == 'white'){
					return
				}
				selectTipsInfo(item.uctId).then(res => {
					this.tipForm = res.data
					this.$refs.modal.open({
						showCancelButton: false
					})
				})
				
			}
		}
	}
</script>

<style lang="scss">
	$white: #FFFFFF;
	$gray: #F5F5F5;
	$green: #1AC68A;
	$blue: #1DA0FF;
	
	.container{
		padding-bottom: 30rpx;
	}
	
	.date-wrapper{
		padding: 40rpx;
		
		.icon-open{
			width: 46rpx;
			height: 46rpx;
			margin-left: 20rpx;
		}
		
		.reverse{
			transform: rotate(-180deg);
			margin: 0;
			margin-right: 20rpx;
		}
	}
	
	.rule-wrapper{
		padding: 30rpx;
		padding-top: 0;
		
		.tips{
			
			.zb-tooltip{
				display: flex;
				align-items: baseline;
				margin-right: 10rpx;
			}
			
			.tip-box{
				width: 22rpx;
				height: 22rpx;
				border-radius: 4rpx;
				margin-right: 10rpx;
			}
			
			.box-white{
				background: $white;
				box-shadow: 0px 0rpx 6rpx 0px rgba(0,0,0,0.2);
			}
			
			.box-gray{
				background: $gray;
				box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
			}
			
			.box-green{
				background-color: $green;
				box-shadow: 0px 0px 6rpx 0px rgba(26,198,138,0.8);
			}
			
			.box-blue{
				background-color: $blue;
				box-shadow: 0px 0px 6px 0px rgba(29,160,255,0.8);
			}
			
		}
	}
	
	.curriculum-wrapper{
		display: table;
		width: calc(100vw - 60rpx);
		margin: 30rpx;
		border-collapse: collapse;
		
		.header{
			position: sticky;
			top:42px;
			display: table-row;
			background: #FFF4EC;
			
			
			.time{
				padding: 30rpx 0;
				display: table-cell;
				text-align: center;
				font-weight: bold;
				border: 1rpx solid #eee;
			}
			
			.date{
				display: table-cell;
				padding: 30rpx 0;
				width: 83rpx;
				text-align: center;
				font-weight: bold;
				border: 1rpx solid #eee;
			}
		}
		
		.tr{
			display: table-row;
			
			.times{
				display: table-cell;
				text-align: center;
				padding: 25rpx 0;
				border: 1rpx solid #eee;
				background: #EDECF6;
			}
			
			.color{
				display: table-cell;
				border: 1rpx solid #eee;
			}
		}
	}
	
	.white{
		background-color: $white;
	}
	
	.gray{
		background-color: $gray;
	}
	
	.green{
		background-color: $green;
	}
	
	.blue{
		background-color: $blue;
	}
	
	.student-wrapper{
		padding-bottom: 30rpx;
		
		.info-row{
			display: flex;
			align-items: center;
			padding-top: 15rpx;
			
			.label{
				font-size: 26rpx;
				color: #000;
			}
			
			.content{
				color: $theme-color;
				font-size: 26rpx;
				padding-left: 20rpx;
			}
		}
	}
</style>